<!--
 * 资源权限 结构管理
 * :
 * @version: 1.0
 * @author: lakeside hubin_yuan.410@hotmail.com
 * @date: 20120-07-14
 * @LastEditors:
 * @LastEditTime:
 -->
<template>
  <div class="tree_wrapper">
    <el-row class="tree_toolbar" justify="space-between" type="flex">
      <el-button-group>
        <el-button icon="el-icon-refresh" type="primary" @click="initializeRefresh">刷新</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="registerResource">一键注册资源
        </el-button>
      </el-button-group>
    </el-row>
    <el-row class="tree_content">
      <el-col :lg="6" :md="8" :span="8" class="flex_column_wrapper">
        <el-input v-model="tree.filter" class="flex_column_header" clearable placeholder="输入关键字进行过滤"></el-input>
        <el-tree ref="securityPermissionTree" :accordion="true" :data="tree.nodes" :expand-on-click-node="false"
                 :filter-node-method="nodeFilter"
                 :props="tree.props" class="flex_column_content"
                 default-expand-all
                 highlight-current node-key="id" @node-click="nodeClickHandle">
                    <span slot-scope="{ node, data }" class="tree_node_toolbar">
                        <span>{{ node.label }}<span v-if="tree.props.tag"
                                                    class="span_tag">{{ data[tree.props.tag] }}</span></span>
                    </span>
        </el-tree>
      </el-col>
      <el-col :lg="18" :md="16" :span="16" class="p-1">
        <el-row class="p-1">
          <el-form ref="menuForm" :disabled="!form.editable" :model="form.entry" label-position="right"
                   label-width="6rem">

            <el-row>
              <el-col :lg="12" :md="24">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.entry.name" :disabled="!form.editable" :readonly="!form.editable"
                            autocomplete="off" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="24">
                <el-form-item label="模型" prop="model">
                  <el-input v-model="form.entry.model" :disabled="!form.editable" :readonly="!form.editable"
                            autocomplete="off" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="24">
                <el-form-item label="编码" prop="code">
                  <el-input v-model="form.entry.code" :disabled="!form.editable" :readonly="!form.editable"
                            autocomplete="off" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="24">
                <el-form-item label="归属系统" prop="system">
                  <el-input v-model="form.entry.system" :disabled="!form.editable" :readonly="!form.editable"
                            autocomplete="off" placeholder=""></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import *  as securityPermissionApi from '../apis/permission'
import {api_mixin, form_mixin, tree_mixin} from "@/mixins";
import SecurityPermissionForm from "../permission/components/form"


export default {
  name: "RouterMenu",
  components: {SecurityPermissionForm},
  mixins: [api_mixin, form_mixin, tree_mixin],
  data() {
    return {
      system: 'pc-web',
      tree: {
        props: {
          children: "children",
          label: "name",
          tag: "model",
          level: "level",
          value: "id",
          sort: "sortNum",
          parent: "parentId"
        },
      }
    }
  },
  computed: {
    treeFilter() {
      return this.tree.filter
    }
  },
  watch: {
    'tree.filter': {
      handler(value) {
        this.$refs.securityPermissionTree.filter(value)
      }
    }
  },
  activated() {
    if (this.$route.meta.keep.state) {
      this.keepStateRefresh()
    } else {
      this.initializeRefresh()
    }
  },
  created() {
    this.treeLoadRefresh()
  },
  methods: {

    /**tree节点取消选择*/
    nodeUnchecked() {
      this.$refs.securityPermissionTree.setCurrentKey(null)
      this.tree.entry = {}
      this.formMode(true, '详情', false, {})
    },

    /**tree节点选中*/
    nodeClickHandle(data, node) {
      this.tree.entry = node
      this.formMode(true, "添加", false, data)
    },
    registerResource() {
      let menuAuth = this.$utils.treeConvertListDF(this.tree.nodes, [], null, 'code')
      menuAuth.map(entry => entry.system = 'pc-web')
      securityPermissionApi.register(menuAuth).then(response => {
        this.responseHandle(response, "注册").then(() => {
          this.form.visible = false
          this.treeLoadRefresh();
        })
      }).catch(() => {
      })
    },

    /**初始化刷新*/
    initializeRefresh() {
      this.treeReset()
      this.formReset()
      this.treeLoadRefresh()
    },
    /**刷新Tree数据*/
    treeLoadRefresh() {
      this.tree.nodes = this.$security.common.routerToResourceHandler()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>